<template>
  <div class="real-name-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <div class="main">
      <div class="table-container">
        <div class="tabs">
          <ul class="list">
            <li
              :class="userType === '劳务人员' ? 'active' : ''"
              @click="handleTabClick('劳务人员')">
              劳务人员
            </li>
            <li
              :class="userType === '管理人员' ? 'active' : ''"
              @click="handleTabClick('管理人员')">
              管理人员
            </li>
          </ul>
          <div class="search-container">
            <div class="search-item">
              <label>关键字：</label>
              <el-input
                placeholder="根据身份证/姓名/电话模糊搜索"
                v-model="condition"
                @keydown.native.enter="handleSearch">
              </el-input>
              <el-button type="primary" @click="handleSearch">
                <i class="el-icon-search"></i>
              </el-button>
              <el-button type="primary" @click="handleRefresh">
                <i class="el-icon-refresh"></i>
              </el-button>
            </div>
            <el-button v-if="hasTabAdd" size="small" type="primary" @click="handleAdd">
              <i class="el-icon-plus"></i> 新增
            </el-button>
          </div>
        </div>
        <el-table
          class="table-content"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          :data="tableData">
          <el-table-column label="人员信息">
            <template slot-scope="scope">
              <div class="info">
                <!--                <img :src="scope.row.headPhoto" alt="">-->
                <div class="detail">
                  <p class="name">{{ scope.row.userName }}</p>
                  <p>
                    <span>{{ scope.row.company }}</span>
                    <span>{{ scope.row.age }}岁</span>
                    <span>{{ scope.row.nationality }}</span>
                    <span>{{ scope.row.nativePlace }}</span>
                  </p>
                  <p>{{ $encryptUsername(scope.row.idCard) }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="详细信息" width="300">
            <template slot-scope="scope">
              <div class="detail-info">
                <p v-if="userType === '管理人员'"><span>部门：</span>{{ scope.row.departName }}</p>
                <p v-else><span>班组：</span>{{ scope.row.teamName }}</p>
                <p><span>人员类型：</span>{{ scope.row.userType }}</p>
                <p><span>联系方式：</span>{{ $encryptUsername(scope.row.userPhone) }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="进出场日期" width="200">
            <template slot-scope="scope">
              <div class="detail-info">
                <p><span>进场：</span>{{ scope.row.inDate || '--' }}</p>
                <p><span>离场：</span>{{ scope.row.outDate || '--' }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="地址" width="400" show-overflow-tooltip></el-table-column>
          <el-table-column prop="userStatus" label="状态" width="80"></el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <span style="display: none;"></span>
              <span v-if="hasTableDetail" class="btn" @click="handleLook(scope.row)">查看</span>
              <span v-if="hasTableEdit" class="btn" @click="handleEdit(scope.row)">编辑</span>
              <span v-if="hasTableDel" class="dar-btn" @click="handleDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!--新增/编辑人员信息弹框-->
      <personnel-info-model
        :visible="visible"
        :formData="formData"
        :type="type"
        :loading="btnLoading"
        @cancel="visible = false"
        @submit="handleSubmit">
      </personnel-info-model>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import personnelInfoModel from '@/components/project/personnel/personnelInfoModelWater';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '人员管理',
        },
        {
          name: '人员实名制'
        }
      ],
      userType: '劳务人员',
      condition: '',
      // 是否搜索
      hasSearch: false,
      tableLoading: false,
      // 列表数据
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      visible: false,
      // 人员信息数据
      formData: {},
      type: 'detail',
      importLoading: false,
      btnLoading: false,
    };
  },
  computed: {
    // 项目id
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  created() {
    this.getTableData();
  },
  components: {
    Breadcrumb,
    personnelInfoModel
  },
  methods: {
    /**
     * 获取人员列表所有数据
     */
    async getTableData() {
      const params = {
        projectId: this.projectId,
        pageNum: this.pageNo,
        userType: this.userType,
        pageSize: this.pageSize
      };
      if (this.hasSearch) {
        params.condition = this.condition;
      }
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getPersonList(params);
      this.tableLoading = false;
      if (success && data) {
        const list = data.list || [];
        this.total = data.total || 0;
        this.tableData = list.map(item => ({
          ...item,
          idCard: item.idCard
            ? String(item.idCard).replace(/\s+/g, '')
            : ''
        }));
      }
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * 人员信息切换
     * @param type {String} 切换类型
     */
    handleTabClick(type) {
      this.userType = type;
      this.condition = '';
      this.clear();
      this.getTableData();
    },
    /**
     * 人员信息搜索
     */
    handleSearch() {
      this.hasSearch = true;
      this.clear();
      this.getTableData();
    },
    handleRefresh() {
      this.clear();
      this.condition = '';
      this.hasSearch = false;
      this.getTableData();
    },
    /**
     * 新增人员
     */
    handleAdd() {
      this.type = 'add';
      this.formData = {};
      this.visible = true;
    },
    // 导入数据
    async handleUpload(e) {
      const file = e.target.files && e.target.files[0];
      if (!file || this.importLoading) return;
      const fm = new FormData();
      fm.append('file', file);
      this.importLoading = true;
      const { success } = await this.$Model.uploadPersonExcel({
        file: fm,
        projectId: this.projectId,
      });
      this.$refs.file.value = '';
      this.importLoading = false;
      if (success) {
        this.$message.success('导入成功');
        this.getTableData();
      }
    },
    /**
     * 查看人员信息
     */
    handleLook(data) {
      this.type = 'detail';
      this.formData = { ...data };
      this.visible = true;
    },
    /**
     * 编辑人员信息
     */
    handleEdit(data) {
      this.type = 'edit';
      this.formData = { ...data };
      this.visible = true;
    },
    // 删除人员信息
    handleDelete(data) {
      this.$confirm('此操作将删除该人员, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.delPerson({
          ids: data.id
        });
        if (success) {
          this.tableData.length <= 1 && this.clear();
          this.getTableData();
          this.$message.success('删除成功');
        }
      });
    },
    async handleSubmit(data) {
      const params = {
        ...data,
        projectId: this.projectId
      };
      if (this.type === 'add') delete params.id;
      this.btnLoading = true;
      const { success } = this.type === 'add'
        ? await this.$Model.addPerson(params)
        : await this.$Model.updatePerson(params);
      this.btnLoading = false;
      if (success) {
        this.getTableData();
        this.$message.success('保存成功');
        this.visible = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .real-name-page {
    width: 100%;
    height: 100%;
    background: $mainBg;
    padding-top: 30px;
    color: #fff;
    position: relative;
    .breadcrumb {
      position: absolute;
      width: 100%;
      height: 30px;
      top: 0;
      left: 0;
      /deep/ .breadcrumb-comp {
        height: 30px;
      }
    }
    .main {
      width: 100%;
      height: 100%;
      background: $mainBg;
      padding: 20px;
      .table-container {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        .tabs {
          width: 100%;
          height: 80px;
          display: flex;
          align-items: center;
          padding: 0 10px;
          .list {
            width: 200px;
            height: 100%;
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 14px;
            li {
              width: 80px;
              height: 100%;
              cursor: pointer;
              border-bottom: 2px solid transparent;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              transition: all .5s;
              &.active {
                color: $mainColor;
                border-bottom: 2px solid #fff;
              }
            }
          }
          .upload-file {
            position: relative;
            cursor: pointer;
            .file {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              opacity: 0;
              cursor: pointer;
            }
          }
          .search-container {
            height: 100%;
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: #fff;
            .search-content {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            .search-item {
              width: 500px;
              height: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 20px;
              font-size: 14px;
              label {
                width: 120px;
                color: $mainColor;
                margin-right: 5px;
              }
              /deep/ .el-input {
                margin-right: 10px;
              }
              .el-input__suffix {
                display: flex;
                align-items: center;
              }
            }
          }
        }
        .table-content {
          height: calc(100% - 140px);
          /deep/ .el-table__body-wrapper {
            overflow-y: auto;
            height: 100%;
            padding-bottom: 50px;
            .btn {
              padding-left: 4px;
              color: $mainColor;
              cursor: pointer;
            }
          }
          .info {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            img {
              display: inline-block;
              width: 80px;
              height: 80px;
              margin-right: 15px;
            }
            .detail {
              .name {
                padding: 5px 0;
                font-size: 16px;
                font-weight: bold;
              }
              p span {
                margin-right: 10px;
              }
            }
          }
          .detail-info {
            p {
              padding: 3px 0;
              span {
                color: $mainColor;
              }
            }
          }
          .iconfont {
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
